<template>
    <div>
        <el-table :data="list" style="width: 100%">
            <el-table-column prop="bannerid" label="bannerid"></el-table-column>
            <el-table-column label="图片">
                <template v-slot:default="scope">
                    <el-image :src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="link" label="跳转链接"></el-table-column>
            <el-table-column prop="alt" label="提示信息"></el-table-column>
            <el-table-column label="是否可用">
                <template v-slot:default="scope">
                    <el-switch v-model="scope.row.flag" active-text="可以" inactive-text="不可以" @change="changeHander($event,scope.row.bannerid)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column  label="操作">
                <template v-slot:default="scope">
                   <el-button type="text" :disabled="role==2" @click="deleteHandler(scope.row.bannerid)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
</div>
</template>

<script>
import {updateBannerFlagAPI,deleteBannerListAPI} from "@/api/banner";
import _ from "lodash"
import { mapState } from "vuex";

export default {
    name: "TableMode",
    props: ["list"],
    methods:{
         changeHander:_.debounce( async function(flag,bannerid){
            console.log(flag,bannerid);
            try{
                await updateBannerFlagAPI({
                    bannerid,
                    flag,
                })
                this.$message.success("状态更新成功")
            }catch(err){
                this.$message.error(err.message)
            }
        },300),
        async deleteHandler(bannerid){
            console.log(bannerid);
            try{
                await deleteBannerListAPI({  //删除数据 
                    bannerid,
                })

                this.$message.success("删除成功");
                
                // 删除数据之后 页面不会自动更新 ->  重新请求数据  (父组件传递的自定义事件)
                this.$emit("refresh");

            }catch(err){
                this.$message.error(err.message)
            }
        }
    },
    computed:{
        ...mapState("authority",["role"])
    }
}
</script>

<style lang="scss" scoped></style>